<template>
<div class="select-medias-box">
    <el-row v-loading="tableLoading">
        <el-col :span="24">
            <div class="search">
                <!-- 搜索条件 -->
            <medias-search 
            :show-place="false"
            :show-keyword = "true"
            v-on:onselectchange="onSelectChange">
         </medias-search>
            </div>
            <div class="table1" >
            <table-medias-list
             :select-medias-list="tablelist"
             :show-select="true"
             v-on:onselectchange="onTableListChange"
            ></table-medias-list>

             <div class="pagination" style="margin-left: -10px;">
                    <el-pagination
                        background
                            :page-size="pageSize"
                            @current-change="handleCurrentChange"
                            @size-change="handlePageSize"
                            layout="prev, pager, next,total "
                            :total="total" :page-count="total" >
                    </el-pagination>
              </div>
              <!-- 外框结束 end -->
            </div>
        </el-col>
    </el-row>
</div>
</template>

<script> 
import Options from "./Options";
import PlaceAPI from "./PlaceAPI";
import TableMediasList from './TableMediasList.vue';

/**
 * 组件 提供搜索和 列表广告物料 提供 选择，
 */
export default {
  components: {TableMediasList},
  props: ["hasrow"],
  data() {
      return {
   
          result:[],
          tablelist:[],
          tableLoading: false,
          total:0,
          pageSize:5,
          queryParams:{}
      }
  },
  created(){
      this.getListInfo()
  },
  filters:{
    filter_disabled(value){
        return  Options.filter_disabled(value);
    },
    filter_type(value){
        return  Options.filter_medias_type(value);
    },
  },
  methods:{
         handlePageSize(size) {
            this.pageSize = size;
            this.getListInfo()
        },
        handleCurrentChange(page) {
            this.page = page;
            this.getListInfo()

        },
        // 选中物料库里的一条物料信息后触发 此事件
        onTableListChange( row ){
            this.$emit('onclosedrawer', {from:"submit", row: row} )
        },
        onSelectChange(e){
          this.page = 1;
            this.queryParams = e;
            // this.queryParams['keyword'] = this.keyword;
            this.getListInfo()  
        },
      // getAllMedias
        getListInfo() {
            this.tableLoading = true;
            PlaceAPI.getAllMedias(this.page, this.pageSize, this.queryParams).then((data) => {
                this.tableLoading = false;
                
                // 把必须要的参数赋值进去
                
                this.total = data.total;
                this.tablelist = data.data;
                // console.log(data)
            })
        }
    }
}
 
</script>
